<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>计算属性</title>
    <script src="./lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <label>单价：</label>
        <input type="text" value="10" v-model="price">
        <br/>
        <label>数量：</label>
        <input type="button" value="+" @click="add">
        <input type="text" value="10" v-model="number">
        <input type="button" value="-" @click="sub">
        <h1>总价：{{tp}}</h1>
        <h1>{{fullName}}</h1>
    </div>
</body>
<script>
     var vm = new Vue({
         el:"#app",
         data:{
             price:10,
             number:10,
             total_price:0,
             firstName:"Mark",
             lastName:"布鲁斯"
         },
         methods:{
             add(){
                 this.number++
                 this.fullName="456587"
             },
             sub(){
                 this.number--
             },
             computed:{
                 tp(){
                     this.total_price = this.number*this.price
                     return this.total_price
                 },
                 fullName:{
                     get:function(){
                        return this.firstName+""+this.lastName
                     },
                     set:function(){
                         this.firstName="浩克",
                         this.lastName="雷神"+newName

                     }
                 },
                 
             }
         }

     })
</script>
</html>